<template>
  <p class="header"
    >当前查看的是服务商
    <el-tag style="font-size: 14px" type="success">{{ name }}</el-tag> 的收入明细</p
  >
  <div class="itemBox">
    <el-form label-width="90px">
      <el-row :gutter="24">
        <el-col :span="4">
          <el-form-item label="状态">
            <el-select v-model="queryForm.status" clearable placeholder="请选择状态">
              <el-option />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="交易时间">
            <el-select v-model="queryForm.status" clearable placeholder="请选择交易时间">
              <el-option />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="服务商编号">
            <el-input v-model="queryForm.status" clearable placeholder="请输入服务商编号" />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="订单号">
            <el-select v-model="queryForm.status" clearable placeholder="请选择订单号">
              <el-option />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-button type="primary">搜索</el-button>
        </el-col>
      </el-row>
    </el-form>
  </div>
  <div class="itemBox">
    <div class="item">
      <div class="items">
        <div class="label">所有收益</div>
        <div class="value">{{ infoData.totalProfit }}</div>
      </div>
      <div class="items">
        <div class="label">月收益</div>
        <div class="value">{{ infoData.monthlyProfit }}</div>
      </div>
      <div class="items">
        <div class="label">所有退款</div>
        <div class="value">{{ infoData.totalRefund }}</div>
      </div>
      <div class="items">
        <div class="label">月退款</div>
        <div class="value">{{ infoData.monthlyRefund }}</div>
      </div>
    </div>
    <div class="tableBox">
      <div class="line"> 共{{ total }}条记录 </div>
      <el-table :data="tableList">
        <el-table-column label="编号" align="center" prop="id" />
        <el-table-column label="分期支付（元）" align="center" prop="installmentPayment" />
        <el-table-column label="聚合支付（元）" align="center" prop="aggregatePayment" />
        <el-table-column label="累计金额（元）" align="center" prop="totalAmount" />
        <el-table-column label="原因" align="center" prop="reason" />
        <el-table-column label="状态" align="center" prop="status" />
        <el-table-column label="时间" align="center" prop="transactionTime" />
      </el-table>
      <el-pagination
        style="margin: 20px 0 10px 0"
        background
        layout="->,prev, pager, next"
        :total="total"
        @change="changePagination"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import * as merchantApi from '@/api/merchant/index'
import { incomeDetailsStore } from '@/store/modules/incomeDetails'
const queryForm = ref({
  pageNo: 1,
  pageSize: 10
})
const useIncomeDetailsStore = incomeDetailsStore()
const name = ref()
const id = ref()
const total = ref()
const infoData = ref({
  totalProfit: 0,
  monthlyProfit: 0,
  totalRefund: 0,
  monthlyRefund: 0
})
//首先在setup中定义
const route = useRoute()
const tableList = ref([])
onMounted(() => {
  console.log('data', useIncomeDetailsStore.getIncomeDetails)
  id.value = route.query.id
  getInfo()
})
const getInfo = () => {
  let params = {
    serviceProvider: id.value,
    ...queryForm.value
  }
  merchantApi.getTransactionDetail(params).then((res) => {
    console.log('Res', res)
    tableList.value = res.list
    total.value = res.total
  })
  merchantApi
    .getProfitRefund({
      serviceProvider: id.value
    })
    .then((res) => {
      infoData.value = res[0]
    })
  merchantApi.getServiceList(id.value).then((res) => {
    name.value = res[0].name
  })
}
const changePagination = (page, size) => {
  queryForm.value.pageNo = page
  queryForm.value.pageSize = size
  getInfo()
}
</script>
<style scoped lang="scss">
.header {
  font-size: 16px;
}

.itemBox {
  margin-top: 20px;
  padding: 20px 10px 10px 10px;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

  .tableBox {
  }
}

.header {
  font-size: 16px;
}

.itemBox {
  margin-top: 20px;
  padding: 20px 10px 10px 10px;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

  .tableBox {
    padding: 0 30px;

    .line {
      padding: 20px;
      font-size: 13px;
      border-bottom: 1px solid #dfe6ec;
    }
  }

  .item {
    display: flex;
    text-align: center;
    margin: 0 0 30px 50px;

    .items {
      margin-right: 30px;

      .label {
        margin-bottom: 4px;
        color: #606266;
        font-size: 13px;
      }

      .value {
        margin-top: 16px;
        font-size: 19px;
      }
    }
  }
}
</style>
